<template>
  <div class="login-wrapper">
    <div class="left"></div>
    <div class="right">
      <div class="login-inner">
        <a-form
          :model="loginForm"
          name="basic"
          :wrapper-col="{ span: 24 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <div class="type-wrapper">
            <div
              class="type-item active"
            >
              账号登录
            </div>
          </div>
          <a-form-item
            name="username"
            :rules="[{ required: true, message: '请输入登录账号!' }]"
          >
            <a-input
              ref="userNameRef"
              v-model:value="loginForm.username"
              size="large"
              placeholder="账号/邮箱/手机"
              allowClear
            >
              <template #prefix>
                <user-outlined type="user" style="color: rgba(0, 0, 0, 0.45)" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item
            name="password"
            :rules="[{ required: true, message: '请输入密码!' }]"
          >
            <a-input-password
              ref="passwordRef"
              v-model:value="loginForm.password"
              size="large"
              placeholder="密码"
            >
              <template #prefix>
                <lock-outlined style="color: rgba(0, 0, 0, 0.45)" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item name="remember" :wrapper-col="{ span: 16 }">
            <a-checkbox v-model:checked="loginForm.remember"
              >记住密码</a-checkbox
            >
          </a-form-item>

          <a-form-item :wrapper-col="{ span: 24 }">
            <a-button
              block
              :loading="loading"
              shape="round"
              size="large"
              type="primary"
              html-type="submit"
              >登录</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, toRefs, ref, reactive, onMounted } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { useStore } from "@/store";
import { UserActionTypes } from "@/store/modules/user/action-types";
import { message } from "ant-design-vue";
import { useRoute, useRouter } from 'vue-router'
interface LoginForm {
  username: string;
  password: string;
  remember: boolean;
  type: number;
}
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
  },
  
  setup() {
    const userNameRef = ref(null);
    const passwordRef = ref(null);
    const store = useStore();
    const router = useRouter()
    const state = reactive({
      loginForm: {
        username: "",
        password: "",
        remember: false,
      } as LoginForm,
      loading: false as boolean,
    });
    const onFinish = async (values: any) => {
      try {
        state.loading = true;
        console.log("Success:", state.loginForm, import.meta.env);
        const res: any = await store.dispatch(
          UserActionTypes.ACTION_LOGIN,
          state.loginForm
        );
        if (res.code === 0) {
          // 请求用户信息、菜单
          let getUserInfoRes:any = await store.dispatch(UserActionTypes.ACTION_GET_USER_INFO, undefined);
          if(getUserInfoRes.code === 0) {
            message.success('登录成功')
            router.push({ path: "/dashboard" })
          }

          state.loading = false;
        } else {
          state.loading = false;
        }
        // const res = await userApis.getToken(state.loginForm);
        // console.log("请求结果", res);
        // notification.success({
        //   message: "Notification Title",
        //   description:
        //     "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
        // });
      } catch (err) {
        console.log(err);
        state.loading = false;
      }
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log("Failed:", errorInfo);
    };

    onMounted(() => {
      console.log("store", store.state.user);
      if (state.loginForm.username === "") {
        (userNameRef.value as any).focus();
      } else if (state.loginForm.password === "") {
        (passwordRef.value as any).focus();
      }
    });
    return {
      userNameRef,
      passwordRef,
      ...toRefs(state),
      onFinish,
      onFinishFailed,
    };
  },
});
</script>


<style lang="less" scoped>
.login-wrapper {
  width: 1000px;
  height: 600px;
  margin: 100px auto 0;
  display: flex;
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(12, 1, 4, 0.05);
  border-radius: 4px;
  .left {
    width: 420px;
    background: @primary-color;
  }
  .right {
    width: 580px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .login-inner {
      width: 340px;
      margin: 0 auto;
      //   .ant-form-item {
      //     margin-bottom: 32px;
      //   }
      .ant-input-affix-wrapper {
        border-radius: 30px;
      }
      :deep .ant-input {
        font-size: 14px !important;
      }
    }
  }
}
.type-wrapper {
  display: flex;
  margin-bottom: @base-gutter * 2;
  .type-item {
    width: 50%;
    font-size: 18px;
    text-align: center;
    color: #a1a6bb;
    line-height: 44px;
    border-bottom: 2px solid @border-color-base;
    cursor: pointer;
    &.active {
      border-color: @primary-color;
      color: @primary-color;
    }
  }
}
</style>